/**
 * Created by 000188 on 2016/7/1.
 */
import React from 'react';
import ReactDom from 'react-dom';

let Turntable = React.createClass({
    render(){
        var img = require('../../../images/pan.png');
        var zhen = require('../../../images/zhen.png');
        return <div className="turntable">
            <img src={img} ref="pan" width="100%" className="turntable-pan" />
            <img src={zhen} ref="zhen" width="33%" onClick={()=>{this.props.rotate(this)}} className="turntable-zhen" />
            <ul ref="list" className="turntable-list">
                {this.state.list.map((t,i)=>{
                    return <li key={i}>{t}</li>
                })}
            </ul>
        </div>
    },
    getInitialState(){
        return {
            list:[]
        }
    },
    componentDidMount(){
        require(['config'],Config=>{
            this.setState({
                list:Config.prizeList
            })
        })
    },
    rotate(num){
        let q = num || 0;
        const d = 22.5;
        let pan = this.refs.pan;
        let list = this.refs.list;
        pan.style.webkitTransform = list.style.webkitTransform = 'rotate(' + (2880 + d  - (45 * q))  + 'deg)';
        pan.style.transform = list.style.transform = 'rotate(' + (2880 + d  -(45 * q))  + 'deg)';
        pan.style.webkitTransition = list.style.webkitTransition = '6s';
        pan.style.transition = list.style.transition = '6s';
    }
});


module.exports = Turntable;